<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
	</head>
    <style>
        .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF;
        }
        .layui-table-page {
            text-align: center;
        }
        .layui-table {
            text-align: center;
            margin-top: -10px;
        }
        .layui-table-view thead th {
            text-align: center;
            font-weight: bold;
        }
        .layui-table-view tbody td {
            text-align: center;
        }
    </style>
<body>
<!--数据表格样式及附件-->	
    <script type="text/html" id="bar">
    <a id="upd" class="layui-btn layui-btn-xs" lay-event="upd">
        <i class="layui-icon">&#xe642;</i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
	</script>


<!--搜索狂-->
<form class="layui-form">
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">排班名称</label>
        <div class="layui-input-inline">
            <input id="schedulingname" style="width: 150px" name="schedulingname" placeholder="输入排班名称查找" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">员工姓名</label>
        <div class="layui-input-block">
            <select id="emp_name" name="emp_name" style="height: 35px;width: 120px;" lay-filter="mySelect">
                <option value="">请选择老师</option>
                <option th:each="e:${elist}" th:value="${e.emp_name}" th:text="${e.emp_name}">张先生</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">值班类型</label>
        <div class="layui-input-block">
            <select id="besum" name="besum" style="height: 35px;width: 120px;" lay-filter="mySelect">
                <option value="">请选择值班</option>
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-block" style="margin-left: 10px">
            <button id="ck" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="fa fa-spin fa-refresh"></i> 查找</button>
            <button id="add" type="button" class="layui-btn layui-btn-sm"><i class="fa fa-plus"></i> 新增</button>
        </div>
    </div>
</form>

<!--    数据表格功能-->
<script type="text/html" id="toolbar">
</script>

<!--数据表格  数据表格使用的是方法渲染-->
<div class="utable">
<table class="layui-table"
       lay-data="{width:1270,height:500, url:'/teacher/teacherdata', page:true, id:'tab',}"
       lay-filter="tab">
    <thead>
    <tr>
        <th lay-data="{field:'beid', width:80}">编号</th>
        <th lay-data="{field:'week'}">值班时间</th>
        <th lay-data="{field:'schedulingname'}">排班名称</th>
        <th lay-data="{field:'emp_name'}">员工姓名</th>
        <th lay-data="{field:'beask'}">值班要求</th>
        <th lay-data="{field:'besum', templet: '#isTrueBesum' }" >总值班</th>
        <th lay-data="{field:'explain'}">说明</th>
        <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar', width:252}"></th>
    </tr>
    </thead>
</table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/html" id="isTrueBesum">
    {{#  if(d.besum ==1 ){ }}
    <p>是</p>
    {{#  } else { }}
    <p>否</p>
    {{#  } }}
</script>
<script type="text/javascript" th:inline="none">

    layui.use('table', function () {
        var table = layui.table;

        //模糊
        $("#ck").on('click',function(){
            var schedulingname=$("#schedulingname").val();
            var emp_name=$("#emp_name").val();
            var besum=$("#besum").val();
            table.reload('tab', {
                where: { //设定异步数据接口的额外参数，任意设
                    schedulingname: schedulingname,
                    emp_name:emp_name,
                    besum:besum,
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //点击添加iframe窗方法
        $("#add").on('click',function(){
            //iframe窗
            layer.open({
                type: 2,
                title: '新增',
                maxmin: true, //开启最大化最小化a按钮
                area: ['550px', '480px'],
                content: ['/teacher/teachertoadd']//这是链接你的页面地址 url
            });
        })

        //去到修改界面
        function upd(beid){
            //iframe窗
            layer.open({
                type: 2,
                title: '修改',
                maxmin: true, //开启最大化最小化a按钮
                area: ['550px', '480px'],
                content: ['/teacher/teachertoupd?beid='+beid]//这是链接你的页面地址 url
            });
        }

        // //头工具栏事件
        // table.on('toolbar(test)', function (obj) {
        //     var checkStatus = table.checkStatus(obj.config.id);
        //     switch (obj.event) {
        //         case 'getCheckData':
        //             layer.msg("添加")
        //             // var data = checkStatus.data;
        //             // layer.alert(JSON.stringify(data));
        //             break;
        //         case 'getCheckLength':
        //             var data = checkStatus.data;
        //             layer.msg('选中了：' + data.length + ' 个');
        //             break;
        //         case 'isAll':
        //             layer.msg(checkStatus.isAll ? '全选' : '未全选');
        //             break;
        //         //自定义头工具栏右侧图标 - 提示
        //         case 'LAYTABLE_TIPS':
        //             layer.alert('这是工具栏右侧自定义的一个图标按钮');
        //             break;
        //     }
        //     ;
        // })

        //监听行工具事件
        table.on('tool(tab)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                            url: '/teacher/teacherdel',
                        type: 'post',
                        data: {
                            beid:data.beid
                        },
                        dataType: 'json',
                        success:function(data){
                            if(data){
                                layer.msg(JSON.stringify("删除成功"));
                                }else {

                                }
                        },
                    })
                });
            }else if (obj.event == 'upd') {//修改
                upd(data.beid)
                //location.reload()
                // table.reload('tab',{
                //     url: '/api/table/search',
                //
                // })
            }else if(obj.event= 'data'){

            }
        })


    });
</script>
</html>